<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :inline="true" :model="searchFrom.param" label-width="auto" ref="serveRef">
        <el-form-item label="服务商" prop="siteId">
          <el-select v-model="searchFrom.param.providerId" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="(item, index) in sys_provider_list" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入" v-model.trim="searchFrom.param.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input placeholder="请输入" v-model.trim="searchFrom.param.phone" clearable></el-input>
        </el-form-item>
      </el-form>
    </searchBox>
    <el-row class="mb8">
      <el-button type="primary" @click="addService">新增</el-button>
    </el-row>

    <el-table :data="tableData" style="height: calc(100vh - 300px)">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="providerName" label="服务商">
        <template #default="scope">
          <el-link :href="scope.row.url" target="_blank">{{ scope.row.providerName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="email" label="注册邮箱" align="center" />
      <el-table-column prop="phone" label="注册手机" align="center" />
      <el-table-column prop="newCreated" label="注册日期" align="center" />
      <el-table-column prop="newLastModified" label="更新时间" align="center" />
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
              <div style="max-width: 500px;">
                {{ scope.row.remark }}
              </div>
            </template>
            <el-text line-clamp="2">
              {{ scope.row.remark }}
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" width="160">
        <template #default="scope">
          <el-button link type="primary" @click="choseEdit(1, scope.row)">编辑</el-button>
          <el-button link type="primary" @click="choseEdit(0, scope.row)">密码</el-button>

          <!-- <el-button link type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum" @pagination="handlePageChange">
    </Pagination>
    <AddServiceProvider :dialogVisible="dialogVisible" :listItem="publicItem" @handleServiceClose="handleServiceClose"
      @handleServiceSure="handleServiceSure"></AddServiceProvider>
    <CheckAssemble :AssembleVisible="AssembleVisible" :listItem="publicItem" @handleAssembleClose="handleAssembleClose"
      @handleAssembleSure="handleAssembleSure" :typeAssemble="2"></CheckAssemble>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import AddServiceProvider from "./components/AddServiceProvider.vue";
import CheckAssemble from "./components/checkAssemble.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const { proxy } = getCurrentInstance();
const dialogVisible = ref(false); //默认不显示弹窗
const AssembleVisible = ref(false); //默认不显示弹窗
const sys_provider_list = ref([]);
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  param: {
    email: "",
    phone: "",
    providerId: null,
  },
}); //搜索参数
const publicItem = ref({}); //公共赋值数据
const total = ref(0);
const tableData = ref([]);
onMounted(() => {
  getProvider();
  getList();
});
const getList = () => {
  site.general
    .sitecloudserverList({
      data: searchFrom.value,
    })
    .then((res) => {
      total.value = res.total;
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            newUrl: sys_provider_list.value.find(e => e.id === code.providerId)?.url,
            newCreated: proxy.DateTime(code.registerTime),
            newLastModified: proxy.DateTime(code.lastModified),
          };
        });
      }
      tableData.value = res.data;
      console.log(res.data);
    });
};
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
// 搜索
const handleSearch = () => {
  getList();
};
// 重置
const handleReset = () => {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 10,
    param: {
      email: "",
      phone: "",
      providerId: null,
    },
  }; //搜索参数
  getList();
};
// 新增
const addService = () => {
  publicItem.value = {};
  dialogVisible.value = true;
};
// 编辑
const choseEdit = (index, row) => {
  if (index) {
  publicItem.value = row;
    dialogVisible.value = true;
  } else {
    let from = {
      id: row.id,
      username: userStore.name,
      password: null
    }
    proxy.$modal.prompt(from.password, `账号：${userStore.name}`, '内容不能为空', '请输入密码','password').then(res => {
      from.password = res.value
      site.general.sitecloudserverViewpassword({
        data: from
      }).then((res) => {
        if (res.code === 200) {
          row.password = res.data.password
          publicItem.value = row;
          console.log(publicItem.value,res);

          AssembleVisible.value = true
        }
      }).catch(err => {
        choseEdit(0, row)

      })

    })
  }

};


const handleServiceSure = () => {// 确定事件
  dialogVisible.value = false;
  getList();
};
const handleAssembleSure = () => {
  AssembleVisible.value = false;
  getList();
};
const handleServiceClose = () => {// 取消事件
  dialogVisible.value = false;
};
const handleAssembleClose = () => {// 取消事件
  AssembleVisible.value = false;
};

const handleDelete = (rowItem) => {
  var newArray = [];
  newArray.push(rowItem.id);
  proxy.$modal.confirm("是否确认删除此数据类型？").then(() => {
    site.general
      .sitecloudserverRemovebatchbyids({
        data: {
          ids: newArray,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$modal.msgSuccess("删除成功");
        }
      });
  });
}


const getProvider = () => {
  site.general
    .siteserverproviderList({
      data: {
        pageNum: 1,
        pageSize: 999,
      },
    })
    .then((res) => {
      sys_provider_list.value = res.data;
    });
};
</script>